<template>
  <div class="calibration">
    <div class="header-box">
      <a-form-model layout="inline" :model="pages" :colon="false">
        <a-form-model-item label="时间">
          <a-date-picker v-model="pages.startTime" :default-value="pages.startTime" :disabled-date="disabledStartDate"
                         show-time format="YYYY-MM-DD HH:mm:ss" placeholder="开始时间" @openChange="handleStartOpenChange"/>
          <span style="color:#9fb043;font-size:18px;padding:0 10px;">—</span>
          <a-date-picker v-model="pages.endTime" :default-value="pages.endTime" :disabled-date="disabledEndDate"
                         show-time format="YYYY-MM-DD HH:mm:ss" placeholder="结束时间" :open="endOpen"
                         @openChange="handleEndOpenChange"/>
        </a-form-model-item>
        <a-form-model-item style="float: right">
          <a-button type="primary" @click="getData">搜索</a-button>
        </a-form-model-item>
      </a-form-model>
    </div>

    <div class="foot-box">
      <div class="table-class">
        <a-table style="height: 100%" :columns="columns" :data-source="tableData" :scroll="{x: '60vm',y:'10rem'}"
                 :rowKey="record=> record.id" size="middle"
                 :pagination="{itemRender:itemRender,onChange:pagechangeFn,showTotal:total => `共 ${total} 条记录`,total:total,defaultPageSize:pages.pageSize,defaultCurrent:pages.currentPage}">
          <!--        <div slot="action" slot-scope="text,record" class="action-class" @click="openModal(record)">工作参数</div>-->
        </a-table>
      </div>
      <div ref="lineecharts" class="echarts-Box">
      </div>
    </div>

  </div>
</template>
<script>
import moment from "moment"
import echarts from "echarts";

export default {
  name: "Calibration.vue",
  props: {
    status: {
      type: [String, Object],
      request: true,
    }
  },
  data() {
    return {
      endOpen: false,
      pages: {
        currentPage: 1,
        pageSize: 30,
        mn: "",
        monitorFactorsCode: "",
        startTime: moment().add(-1, "M"),
        endTime: moment(),
        status: ""
      },
      total: 0,
      columns: [],
      tableData: [],
      echartsData: [],
    }
  },
  methods: {
    // 日期方法
    disabledStartDate(startValue) {
      const endValue = this.pages.endTime;
      if (!startValue || !endValue) {
        return false;
      }
      return startValue.valueOf() > endValue.valueOf();
    },
    disabledEndDate(endValue) {
      const startValue = this.pages.startTime;
      if (!endValue || !startValue) {
        return false;
      }
      return startValue.valueOf() >= endValue.valueOf();
    },
    handleStartOpenChange(open) {
      if (!open) {
        this.endOpen = true;
      }
    },
    handleEndOpenChange(open) {
      this.endOpen = open;
    },
    // 日期方法完
    // 分页方法
    itemRender(current, type, originalElement) {
      if (type === "prev") {
        return<a > 上一页 < /a>;
      } else if (type === "next") {
        return<a > 下一页 < /a>;
      }
      return originalElement;
    },
    pagechangeFn(page) {
      this.pages.currentPage = page;
      this.getData()
    },
    // 请求数据
    getData() {
      this.tableData = [];
      this.echartsData = [];
      this.$nextTick(() => {
        this.myCharts = echarts.init(this.$refs.lineecharts);
        this.myCharts.showLoading({
          text: "正在加载中。。。",
          maskColor: "rgba(255, 255, 255, 0.8)",
          color: "#1890ff",
          textColor: "#000",
        });
      });
      let obj = JSON.parse(JSON.stringify(this.pages));
      obj.startTime = new Date(obj.startTime).getTime()
      obj.endTime = new Date(obj.endTime).getTime()
      this.$api.realTimeControlFindLog(obj).then(res => {
        console.log(res.data)
        if (res.data.code == 0) {
          if(res.data.data.records.length == 0){
            this.$message.info("暂无数据")
          }
          let arrey = res.data.data.records;
          this.total = res.data.data.total;
          arrey.forEach(v => {
            v.data = JSON.parse(v.data);
            v.data.monitorName = this.status.monitorName;
            v.data.monitorFactorsName = this.status.monitorFactorsName;
            v.data.datatime = moment(v.datatime).format("YYYY/MM/DD HH:mm:ss");
            this.tableData.push(v.data);
          })
          this.echartsData = JSON.parse(JSON.stringify(this.tableData))
          this.lineEcharFn();
        }else {
          this.$message.warning(res.data.data.errorMessage)
        }
      })
    },
    // 图表
    lineEcharFn() {
      this.myCharts.clear();
      let lineData = [];
      let timeData = [];
      let dataArr = [];
      console.log(this.echartsData);
      this.echartsData.forEach(v => {
        timeData.push(v.datatime)
      })
      let monitorData = [];
      if(this.status.status == 2){
        monitorData = [
              {name:"校满点数据",code:"i15004-Info"},
              {name:"校零点数据",code:"i15002-Info"}
            ]
      }else {
        monitorData = [
          {name:"标液浓度1",code: "i15013-Info"},
          {name:"标液浓度2",code: "i15015-Info"},
          {name:"标液浓度3",code: "i15017-Info"},
          {name:"标液浓度4",code: "i15019-Info"},
          {name:"标液浓度5",code: "i15021-Info"},
        ];
      }
      monitorData.forEach(list => {
        let obj = {
          code: list.code,
          name: list.name,
          listData: [],
        }
        this.echartsData.forEach(v => {
          for (let key of Object.keys(v)){
            if (list.code == key) {
              obj.listData.push(v[key])
            }
          }

        })
        lineData.push(obj);
      })
      lineData.forEach(item => {
          let newobj = {
            name:  item.name,
            type: "line",
            //是否平滑曲线
            smooth: true,
            // 线上点的样子圆、正方形。。。
            symbol: "rect",
            // 大小
            symbolSize: 10,
            // 数据
            data: item.listData,
          }
          dataArr.push(newobj);
      })

      console.log(lineData, timeData, dataArr)
      this.myCharts.setOption({
        color: ["#8470ff", "#00ff7f", "#b8860b", "#EE82EE", "#AEEEEE", "#00FF7F"],
        // 图例组件
        legend: {
          show: true,
          // icon: 'circle',
          top:"30%",
          right: 10,
          orient:"vertical",
          textStyle: {
            fontSize: 12,
            color: '#c8c8c8'
          },
        },
        //提示框组件
        tooltip: {
          trigger: "axis",
          show: true,
          axisPointer: {
            lineStyle: {
              color: "#207064",
            },
          },
          // formatter:"{b} </br> {c}"+unit
          formatter: function (params) {
            let res = "";
            for (let i = 0; i < params.length; i++) {
              // let arr =[];
              // lineData.forEach(item=>{
              //   let nameUnit = item.name;
              //   if( nameUnit == params[i].seriesName){
              //     arr = item.listData;
              //   }
              // });
              res +=
                  params[i].marker +
                  params[i].seriesName + ":" +
                  params[i].value + "<br/>"
            }
            return res;
          },
        },
        grid: {
          top: 40,
          left: 40,
          bottom: "35%",
          right: "12%",
        },
        xAxis: {
          // name: "监测时间",
          nameGap: 5,
          nameTextStyle: {
            color: "#37ddc0",
            fontSize: 16,
          },
          textStyle: {
            color: "red",
          },
          data: timeData,
          // min: (value) => {
          //     return Math.round(value.min);
          // },
          axisLine: {
            lineStyle: {
              color: "#207064",
            },
          },
          //x轴坐标的旋转
          axisLabel: {
            rotate: 45,
            color: "rgba(255,255,255,0.5)",
          },
        },
        yAxis: {
          //y轴字体颜色
          // name: unit,
          type: "value",
          nameGap: 10,
          nameTextStyle: {
            color: "#37ddc0",
            fontSize: 16,
          },
          axisLabel: {
            color: "#207064",
          },
          splitLine: {
            show: true,
            //设置y轴的坐标轴刻度设置为虚线和颜色
            lineStyle: {
              type: "dashed",
              color: "#207064",
            },
          },
          //y轴颜色
          axisLine: {
            lineStyle: {
              color: "#207064",
            },
          },
        },
        dataZoom: [
          {
            show: true,
            height: 12,
            xAxisIndex: [0],
            bottom: 0,
            start: 100,
            end: 70,
            handleIcon:
                "path://M306.1,413c0,2.2-1.8,4-4,4h-59.8c-2.2,0-4-1.8-4-4V200.8c0-2.2,1.8-4,4-4h59.8c2.2,0,4,1.8,4,4V413z",
            handleSize: "110%",
            handleStyle: {
              color: "#d3dee5",
            },
            textStyle: {
              color: "#fff",
            },
            borderColor: "#90979c",
          },
          {
            type: "inside",
            show: true,
            height: 15,
            start: 1,
            end: 35,
          },
        ],
        series: dataArr
      });
      this.myCharts.hideLoading();
      window.addEventListener("resize", () => {
        this.myCharts.resize();
      });
    },
    init() {
      this.pages = {
        currentPage: 1,
        pageSize: 30,
        mn: this.status.mn,
        monitorFactorsCode: this.status.monitorFactorsCode,
        startTime: moment().add(-1, "M"),
        endTime: moment(),
        status: this.status.status
      };
      // this.pages = {
      //   currentPage: 1,
      //   pageSize: 30,
      //   mn: "",
      //   monitorFactorsCode: "",
      //   startTime: moment().add(-4, "M"),
      //   endTime: moment(),
      //   status: this.status.status
      // };
      // this.pages.mn = status.mn;
      if (this.pages.status == 2) {
        this.columns = [
          {title: '排口名称', width: 150, dataIndex: 'monitorName', align: 'center'},
          {title: '因子名称', dataIndex: 'monitorFactorsName', width: 180, align: 'center'},
          {title: '上传时间', dataIndex: 'datatime', width: 200, align: 'center'},
          {title: '校零时间', dataIndex: 'i15003-Info', width: 150, align: 'center'},
          {title: '校零结果', dataIndex: 'i15001-Info', width: 120, align: 'center'},
          {title: '校零浓度测量值', dataIndex: 'i15002-Info', width: 180, align: 'center'},
          {title: '校零浓度信号值', dataIndex: 'i15036-Info', width: 180, align: 'center'},
          {title: '校满时间', dataIndex: 'i15005-Info', width: 150, align: 'center'},
          {title: '校满结果', dataIndex: 'i15035-Info', width: 180, align: 'center'},
          {title: '校满浓度测量值', dataIndex: 'i15004-Info', width: 180, align: 'center'},
          {title: '校满浓度信号值', dataIndex: 'i15037-Info', width: 180, align: 'center'},
        ];
      } else {
        this.columns = [
          {title: '排口名称', width: 150, dataIndex: 'monitorName', align: 'center'},
          {title: '因子名称', dataIndex: 'monitorFactorsName', width: 180, align: 'center'},
          {title: '监测时间', dataIndex: 'datatime', width: 200, align: 'center'},
          {title: '标液浓度1', dataIndex: 'i15013-Info', width: 150, align: 'center'},
          {title: '标液信号值1', dataIndex: 'i15014-Info', width: 120, align: 'center'},
          {title: '标液浓度2', dataIndex: 'i15015-Info', width: 180, align: 'center'},
          {title: '标液信号值2', dataIndex: 'i15016-Info', width: 180, align: 'center'},
          {title: '标液浓度3', dataIndex: 'i15017-Info', width: 150, align: 'center'},
          {title: '标液信号值3', dataIndex: 'i15018-Info', width: 180, align: 'center'},
          {title: '标液浓度4', dataIndex: 'i15019-Info', width: 180, align: 'center'},
          {title: '标液信号值4', dataIndex: 'i15020-Info', width: 180, align: 'center'},
          {title: '标液浓度5', dataIndex: 'i15021-Info', width: 180, align: 'center'},
          {title: '标液信号值5', dataIndex: 'i15022-Info', width: 180, align: 'center'},
        ];
      }
      this.getData()
    }
  },
  mounted() {


  },
  destroyed() {
    console.log("sss")
  }
}
</script>

<style scoped lang="scss">
.calibration {
  width: 100%;
  height: 100%;

  .header-box {
    height: 8%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    ::v-deep .ant-form {
      flex: 1;
    }
  }

  .foot-box {
    height: 92%;
    display: flex;
    flex-direction: column;

    .table-class {
      height: 44%;

      ::v-deep .ant-spin-nested-loading, ::v-deep .ant-spin-container {
        height: 100%;
      }

      ::v-deep .ant-table-pagination.ant-pagination {
        position: absolute;
        right: 0;
        bottom: 0;
      }

      ::v-deep .ant-table-wrapper .ant-table-fixed-header .ant-table-scroll .ant-table-header {
        margin-bottom: 0!important;
        overflow: hidden !important;
      }
    }

    .echarts-Box {
      flex: 1;
      width: 100%;
    }
  }

}
</style>